<template>
	<view class="box">
		<!-- 头部 -->
		<tui-navigation-bar class="navigationBar" :isOpacity="false" backgroundColor="">
			<view class="tui-content-box">
				<view>
					<tui-icon name="arrowleft" color="#ffffff" @click="backTo"></tui-icon>
				</view>
				
			</view>
		</tui-navigation-bar>
		
		
		
		
		
		
		<view class="content">
			<image class="img" :src="src" mode=""></image>
			<view class="btn">
				<view class="btnimg" @click="saveImgToLocal">
					保存海报
				</view>
				<view class="btnimg" @click="popup(1)">
					分享海报
				</view>
			</view>
		</view>
		
		
		<!--底部分享弹窗-->
		<tui-bottom-popup :show="popupShow" @close="popup">
			<view class="tui-share">
				<view class="tui-share-title">分享到</view>
				
				<scroll-view scroll-x class="tui-mt">
					<view class="tui-share-top">
						<view class="tui-share-item" :class="[shareList[0].share.length-1===index?'tui-item-last':'']" v-for="(item,index) in shareList[0].share":key="index" @tap="forward(index)">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<tui-icon :name="item.icon" :color="item.color" :size="item.size?item.size:36"></tui-icon>
							</view>
							<view class="tui-share-text">{{item.name}}</view>
						</view>
						<view class="tui-empty">!</view>
					</view>
				</scroll-view>
				
			</view>
		</tui-bottom-popup>
		<!--底部分享弹窗-->
		
		
	</view>
</template>
<script>

	export default {

		data() {
			return {
				src:"",
				popupShow: false,           //底部分享
				openSettingBtnHidden: true,	//是否授权
				shareList: [
					{
						share: [
							{
								name: "微信",
								icon: "wechat",
								color: "#80D640"
							},
							{
								name: "朋友圈",
								icon: "moments",
								color: "#80D640",
								size: 32
							},
						]
					},
				],
			}
		},

		onLoad() {
			uni.showLoading({
			    title: '加载中',
				mask:true
			});
			
			this.tui.request('/app/user/getSharePic', 'GET', {},false,false,false,).then(res => {
				if(res.errno == 0){
					uni.hideLoading();
					this.src = res.data
				}
			})

		},

		methods: {
			// 返回
			backTo(){
				uni.navigateBack({
					
				})
			},
			
			
			saveEwm:function(e){
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									this.saveImgToLocal();
								},
								fail() {//这里是用户拒绝授权后的回调
									this.openSettingBtnHidden = false
								}
							})
						} else {  //用户已经授权过了
							this.saveImgToLocal();
						}
					}
				})
			},
			// 保存
			saveImgToLocal:function(e){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function (res) {
						if (res.confirm) {
							console.log(that.src)
							uni.downloadFile({
								url: that.src,					//图片地址
								success: (res) =>{
									if (res.statusCode === 200){
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									} 
								}
							})
							
							
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			// 转发弹框
			popup() {
				this.popupShow = !this.popupShow
			},
			// 转发朋友圈
			forward(index){
				let that = this;
				uni.getProvider({
					service: "payment",
					success: (res) => {
						console.log(res)
					},
					fail: (e) => {
						console.log("获取支付通道失败：", e);
					}
				});
				
				if(index == 0){
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 2,
					    href: that.tui.intershareUrl() + "/qianyanH5/#/pages/user/invitation",
					    title: "邀请码分享",
					    summary: "邀请码分享",
					    imageUrl: that.src,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}else{
					uni.share({
					    provider: "weixin",
					    scene: "WXSenceTimeline",
					    type: 2,
					    href: that.tui.intershareUrl() + "/qianyanH5/#/pages/user/invitation",
					    title: "邀请码分享",
					    summary: "邀请码分享",
					    imageUrl: that.src,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}
				
			},
			
		}
	}
</script>
<style lang='scss'>
	page{
		height: 100%;
	}
	.box{
		width: 100%;
		height: 100%;
	}
	
	/*navigation-bar*/
	.navigationBar{
		/* background: url(../../static/img/yuncang/yuncang.png) no-repeat; */
		background-size: 100% 600upx;
	}
	.tui-content-box {
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
	}
		
	.tui-content-tit{
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		color: #ffffff;
		font-size: 18px;
		padding: 0 12px;
		text-align: center;
		margin-left: 46rpx;
	}
	
	.tui-search-box {
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		border-radius: 18px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, .2);
	}
	
	.tui-search-text {
		color: #ffffff;
		padding-left: 10rpx;
	}
	
	
		
		
		
		
	.content{
		width: 100%;
		height: 100%;
	}
	.img{
		width: 100%;
		height: 90%;
		display: block;
	}
	.btn{
		height: 10%;
		background: #9D8CD9;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.btnimg{
		padding: 8upx 50upx 8upx 50upx;
		background:url(../../static/img/home/share_poster_button.png) no-repeat;
		background-size: 100% 100%;
		
		font-size: 36upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 75upx;
		
	}

/*转发*/
	.tui-share {
		background: #e8e8e8;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-share-title {
		font-size: 26rpx;
		color: #7E7E7E;
		text-align: center;
		line-height: 26rpx;
		padding: 20rpx 0 50rpx 0;
	}
	
	.tui-share-top,
	.tui-share-bottom {
		min-width: 100%;
		padding: 0 20rpx 0 30rpx;
		white-space: nowrap;
	}
	
	.tui-mt {
		margin-top: 30rpx;
		padding-bottom: 300rpx;
	}
	
	.tui-share-item {
		width: 126rpx;
		display: inline-block;
		margin-right: 24rpx;
		text-align: center;
	}
	
	.tui-item-last {
		margin: 0;
	}
	
	.tui-empty {
		display: inline-block;
		width: 30rpx;
		visibility: hidden;
	}
	
	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126rpx;
		width: 126rpx;
		border-radius: 32rpx;
	}
	
	.tui-share-text {
		font-size: 24rpx;
		color: #7E7E7E;
		line-height: 24rpx;
		padding: 20rpx 0;
		white-space: nowrap;
	}
	
	.tui-btn-cancle {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 36rpx;
		color: #3e3e3e;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-hover {
		background: rgba(0, 0, 0, 0.2)
	}
	
</style>
